<template>
  <div class="body1" style="padding-top:10px;">
    <div class="form_select">
      <div>
          <el-button type="primary"  size="small" @click="selectShow = !selectShow">
          &nbsp;&nbsp;搜&nbsp;&nbsp;索&nbsp;&nbsp;
          </el-button>
      </div>
      <div class="select_right">
          <el-dropdown>
            <el-button type="primary" size="small">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>导出当页</el-dropdown-item>
              <el-dropdown-item>导出全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary"  size="small" @click="go('/supply/buy',0)">新建采购单</el-button>
      </div>
    </div>
    <div class="form_select1" v-show="selectShow">
        <div class="select_font">
           供应商名称:<el-input class="select_input1" size="small" v-model="selectForm.name" placeholder="供应商名称"></el-input>
        </div>
        <div class="select_font">
           供应商电话:<el-input class="select_input1" size="small" v-model="selectForm.phone" placeholder="供应商电话"></el-input>
        </div>
        <div class="select_font">
          单&nbsp;&nbsp;&nbsp;号:<el-input class="select_input1" size="small" v-model="selectForm.orderNum" placeholder="供应商电话"></el-input>
        </div>
        <div class="select_font">
          付&nbsp;款&nbsp;状&nbsp;态:<el-select class="select_option1" size="small" v-model="selectForm.pay_status" placeholder="请选择">
         <el-option
              v-for="item in payStatusArr"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="select_font">
          收&nbsp;货&nbsp;状&nbsp;态:<el-select class="select_option1" size="small" v-model="selectForm.take_status" placeholder="请选择">
         <el-option
              v-for="item in takeStatusArr"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="select_font">
          制单人:<el-select class="select_option1" size="small" v-model="selectForm.user_id" placeholder="请选择">
         <el-option
              v-for="(item,index) in userArr"
              :key="item.id"
              :label="item.username"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="select_font">
           开&nbsp;始&nbsp;日&nbsp;期: <el-date-picker
            v-model="selectForm.sdate"
            type="date"
            placeholder="选择结束日期" 
            size="small" 
            class="select_option1"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            >
          </el-date-picker>
        </div>
        <div class="select_font">
           结&nbsp;束&nbsp;日&nbsp;期: <el-date-picker
            v-model="selectForm.edate"
            type="date"
            placeholder="选择结束日期" 
            size="small" 
            class="select_option1"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            >
          </el-date-picker>
        </div>
        <div class="select_font">
          <el-button type="primary"  size="small" @click="search">
        &nbsp;&nbsp;搜&nbsp;&nbsp;索&nbsp;&nbsp;</el-button>
        </div>
    </div>
    <buyTable :list="list" @func="handle"></buyTable>
    <detail :show="detailShow" :item="item" :arr="arr" @func="close"></detail>
    </div>
   </div>


</template>
 
<script>
import buyTable from "./table"
import detail from "./detail"
export default {
  name: "Buy",
  data() {
    return {
      item:{},
      arr:[],
      list:[],
      selectForm:{},
      selectShow:false,
      detailShow:false,
      payStatusArr:[
        {id:0,name:'全部'},
        {id:1,name:'未付款'},
        {id:2,name:'已付款'}
      ],
      takeStatusArr:[
        {id:0,name:'全部'},
        {id:1,name:'未收货'},
        {id:2,name:'已收货'}
      ],
      userArr:[
        {id:0,username:'全部'}
      ]
    };
  },
  components: {
    "buyTable": buyTable,
    "detail": detail
  },
  created: function() {
    this.getList()
    this.getUser()
  },
  methods: {
    go:function(url,id){
      this.$router.push({path :url,query:{id:0}})
    },
    getList:function() {
      this.selectForm.store_id = localStorage.getItem('store_id')
      var that = this
      this.$get('buy/all',this.selectForm).then((res) => {
        that.list = res.data
      })
    },
    getUser:function(){
      var data = {
        store_id:localStorage.getItem('store_id')
      }
      var that = this
      this.$get('staff/all',data).then((res) => {
        that.user = res.data
        var userArr = that.userArr
        that.userArr = userArr.concat(res.data)
      })
    },
    search:function(){
      if(this.selectForm.sdate && !this.selectForm.edate){
        this.$message.error('请选择开始时间和结束时间!');
        return;
      }
      if(!this.selectForm.sdate && this.selectForm.edate){
        this.$message.error('请选择开始时间和结束时间!');
        return;
      }
      if(this.selectForm.sdate > this.selectForm.edate){
        this.$message.error('开始时间不能大于结束时间!');
        return;
      }
      this.getList()
    },
    handle:function(data){
      if(data.key){
        this[data.key] = true
        this.item = data.item
        this.arr = data.arr
      }else{
        this.getList()
      }
    },
    close:function(data){
      this[data.key] = false
    }
}
};
</script>
<style>

</style>